<template>
	<view class="container" style="overflow-y: scroll;height: 100%">
		  <view class="semi-circle"></view>
		<view class="searchBox">
			<view class="inputBox">
				<image src="@/static/job/search-icon.png" class="searchIcon" mode=""></image>
				<input type="text" name="" placeholder="请输入搜索内容" v-model="searchValue">
			</view>
			<view class="searchBtn" @click="startSearch">
				搜索
			</view>
		</view> 
		
		<view>
			
			  <tn-swiper :list="list"></tn-swiper>			
		</view>
<view class="tn-flex" >		
			<view class="tn-flex-1 wallpaper-shadow tn-main-gradient-aquablue--single " style="margin: 25rpx 15rpx 0 0;padding: 30rpx 0;"
				@click="goForm">
				<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
				
					<view class="tn-text-center" style="font-size: 35rpx;font-weight: bold;color: #ffffff;">
						<view class="tn-text-ellipsis">客观题考试时间</view>
					</view>					
					<view class="tn-text-center" style="font-size: 30rpx;padding-top: 15rpx;color: #ffffff;">
						<view class="tn-text-ellipsis">倒计时：288天</view>
					</view>
					
					<view class="tn-text-center" style="font-size: 30rpx;padding-top: 15rpx;">					
						<view class="tn-text-ellipsis" style="color: #ffffff;">9月21日</view>						
					</view>
				</view>
			</view>
			<view class="tn-flex-1 wallpaper-shadow tn-main-gradient-blue--single" style="margin: 25rpx 0 0 15rpx;padding: 30rpx 0;"
				@click="goDiscover">
				<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
					<view class="tn-text-center" style="font-size: 35rpx;font-weight: bold;color: #ffffff;">
						<view class="tn-text-ellipsis">主观题考试时间</view>
					</view>					
					<view class="tn-text-center" style="font-size: 30rpx;padding-top: 15rpx;color: #ffffff;">
						<view class="tn-text-ellipsis">倒计时：317天</view>
					</view>
					<view class="tn-text-center" style="font-size: 30rpx;padding-top: 15rpx;">
						<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center"
							style="color: #55aaff;">
							<view class="calendar-fill"></view>
						</view>
						
						<view class="tn-text-ellipsis" style="color: #ffffff;">10月20日</view>
					</view>
				</view>
			</view>
		</view>
		<view class="banner">			
			<view class="item" @click="getPage()">
				<image src="@/static/job/job.png" class="bIcon" mode=""></image>
				<text>章节练习</text>
			</view>
			<view class="item">
				<image src="@/static/job/education.png" class="bIcon" mode=""></image>
				<text>历年真题</text>
			</view>
			<view class="item">
				<image src="@/static/job/package.png" class="bIcon" mode=""></image>
				<text>模拟试题</text>
			</view>
			<view class="item">
				<image src="@/static/job/type.png" class="bIcon" mode=""></image>
				<text>每日一练</text>
			</view>
		
			<view class="item">
				<image src="@/static/job/type.png" class="bIcon" mode=""></image>
				<text>我的错题</text>
			</view>	
				<view class="item">
					<image src="@/static/job/type.png" class="bIcon" mode=""></image>
					<text>我的收藏</text>
				</view>
				<view class="item">
					<image src="@/static/job/type.png" class="bIcon" mode=""></image>
					<text>每日签到</text>
				</view>		
		</view>
	<view class="banner">
		<view class="item">
			<image src="@/static/job/job.png" class="bIcon" mode=""></image>
			<text>资格查询</text>
		</view>
		<view class="item">
			<image src="@/static/job/education.png" class="bIcon" mode=""></image>
			<text>官网直达</text>
		</view>
	
	</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: null, // Search Value
				tabList: [{
					name: '最新'
				}, {
					name: 'Java'
				}],
				current: 0, // tab选项
				list: [
				        {image: "/static/job/ces.png", title: 'xxx'},
				        {image: '/static/job/ces.png', title: 'xxx'},
				      ],
				jobList: [
					{jobName:'Java开发工程师',money:'30K-60K 14薪',badgeList:[{name:'1-3年'},{name:'本科'},{name:'美女'}],info:'鸭儿高头巴颗米科技有限公司/50-100人',hr:'周女士-人事经理',header:'https://salephine.asia/img/index/logo.gif',address:'成都市-高新区'},
					{jobName:'Java开发工程师',money:'30K-60K 14薪',badgeList:[{name:'1-3年'},{name:'本科'},{name:'美女'}],info:'鸭儿高头巴颗米科技有限公司/50-100人',hr:'吴女士-人事经理',header:'https://salephine.asia/img/index/logo.gif',address:'成都市-高新区'},
					{jobName:'Java开发工程师',money:'30K-60K 14薪',badgeList:[{name:'1-3年'},{name:'本科'},{name:'美女'}],info:'鸭儿高头巴颗米科技有限公司/50-100人',hr:'王女士-人事经理',header:'https://salephine.asia/img/index/logo.gif',address:'成都市-高新区'},
					{jobName:'Java开发工程师',money:'30K-60K 14薪',badgeList:[{name:'1-3年'},{name:'本科'},{name:'美女'}],info:'鸭儿高头巴颗米科技有限公司/50-100人',hr:'张女士-人事经理',header:'https://salephine.asia/img/index/logo.gif',address:'成都市-高新区'},
					{jobName:'Java开发工程师',money:'30K-60K 14薪',badgeList:[{name:'1-3年'},{name:'本科'},{name:'美女'}],info:'鸭儿高头巴颗米科技有限公司/50-100人',hr:'李女士-人事经理',header:'https://salephine.asia/img/index/logo.gif',address:'成都市-高新区'},
					{jobName:'Java开发工程师',money:'30K-60K 14薪',badgeList:[{name:'1-3年'},{name:'本科'},{name:'美女'}],info:'鸭儿高头巴颗米科技有限公司/50-100人',hr:'谢女士-人事经理',header:'https://salephine.asia/img/index/logo.gif',address:'成都市-高新区'},
					{jobName:'Java开发工程师',money:'30K-60K 14薪',badgeList:[{name:'1-3年'},{name:'本科'},{name:'美女'}],info:'鸭儿高头巴颗米科技有限公司/50-100人',hr:'易女士-人事经理',header:'https://salephine.asia/img/index/logo.gif',address:'成都市-高新区'},
					{jobName:'Java开发工程师',money:'30K-60K 14薪',badgeList:[{name:'1-3年'},{name:'本科'},{name:'美女'}],info:'鸭儿高头巴颗米科技有限公司/50-100人',hr:'甘女士-人事经理',header:'https://salephine.asia/img/index/logo.gif',address:'成都市-高新区'},
					{jobName:'Java开发工程师',money:'30K-60K 14薪',badgeList:[{name:'1-3年'},{name:'本科'},{name:'美女'}],info:'鸭儿高头巴颗米科技有限公司/50-100人',hr:'苏女士-人事经理',header:'https://salephine.asia/img/index/logo.gif',address:'成都市-高新区'},
					{jobName:'Java开发工程师',money:'30K-60K 14薪',badgeList:[{name:'1-3年'},{name:'本科'},{name:'美女'}],info:'鸭儿高头巴颗米科技有限公司/50-100人',hr:'郑女士-人事经理',header:'https://salephine.asia/img/index/logo.gif',address:'成都市-高新区'},
				], // 工作列表
			}
		},
		onLoad() {

		},
		methods: {
			getPage(){
			uni.navigateTo({
				url:'/pages/exam/exam'
			})
			},
			//Change Tab
			changeTab(item, index) {
				this.current = index;
			},
			// Start Search
			startSearch() {
				uni.showToast({
					title: this.searchValue,
					duration: 1500,
					icon: 'none'
				})
			},
			// Click Item
			clickJobInfo(item, index) {
				uni.navigateTo({
					url:'/pagesJob/jobDetail/jobDetail?item='+encodeURIComponent(JSON.stringify(item))
				})
		 },
			// Click Addjob
			addJob() {
				uni.showToast({
					title: '点击了加号',
					duration: 1500,
					icon: 'none'
				})
			}
		}
	}
</script>
<style>
	page {
		margin: 0;
		padding: 0;
		height: 100%;
		width: 100%;
	}
	// 去掉页面滚动条
	::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}
</style>
<style lang="less" scoped>
	
	.dflex() {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.dflexsb() {
		.dflex();
		justify-content: space-between;
	}
	.dflexsa() {
		.dflex();
		justify-content: space-around;
	}
	.container {
		height: 100%;
		width: 100%;
		
		font-family: PingFangSC-Semibold, PingFang SC;
		padding: 30rpx;
		box-sizing: border-box;
		overflow: hidden ;
		background: #f8f8f8;
		color: #333;
		.searchBox {
			.dflexsb();
			width: 100%;
			padding: 10rpx;
			box-sizing: border-box;
			.inputBox {
				position: relative;
				width: 100%;
				height: 70rpx;
				background: #fff;
				border-radius: 50rpx;
				.searchIcon {
					width: 30rpx;
					height: 30rpx;
					position: absolute;
					left: 30rpx;
					top: 30%;
				}
				input {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0rpx;
					left: 0rpx;
					padding-left: 80rpx;
					font-size: 26rpx;
					color: #ccc;
					;
					&::placeholder {
						font-size: 26rpx;
						color: #ccc;
					}
				}
			}
			.searchBtn {
				padding: 16rpx 0rpx;
				box-sizing: border-box;
				background-color: #47cfc8;
				min-width: 140rpx;
				.dflex();
				color: #fff;
				font-size: 26rpx;
				border-radius: 40rpx;
				margin-left: 20rpx;
			}
		}
		.banner {
			.dflexsb();
			padding: 30rpx;
			box-sizing: border-box;
			margin-top: 30rpx;
			border-radius: 60rpx;
			background: #fff;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			.item {
				width: 25%;
				.dflex();
				flex-direction: column;
				min-height: 150rpx;
				.bIcon {
					width: 75rpx;
					height: 75rpx;
				}
				text {
					margin-top: 24rpx;
					font-size: 24rpx;
				}
			}
		}
		.content {
			height: 100%;
			overflow-y: scroll;
			.cTop {
				.dflexsb();
				padding: 20rpx 0rpx;
				box-sizing: border-box;
				.left {
					.dflex();
					justify-content: flex-start;
					height: 80rpx;
					.item {
						width: 120rpx;
						color: #333;
						font-size: 26rpx;
						height: 80rpx;
						.dflex();
						flex-direction: column;
						background-color: transparent !important;
						.line {
							width: 30rpx;
							height: 30rpx;
							border-radius: 90%;
							border-bottom: 4rpx solid transparent;
							transition: all 0.3s linear;
						}
						&.active {
							font-size: 28rpx;
						}
						&.active .line {
							border-bottom: 4rpx solid #47cfc8;
						}
					}
				}
				.right {
					.add {
						width: 50rpx;
						height: 50rpx;
					}
				}
			}
			.list {
				height: 100%;
				overflow-y: scroll;
				padding-bottom: 300rpx;
				box-sizing: border-box;
			}
			.itemJob {
				padding: 30rpx;
				box-sizing: border-box;
				background: #fff;
				border-radius: 60rpx;
				margin-bottom: 30rpx;
				.iTop {
					font-size: 26rpx;
					font-weight: bolder;
					padding: 0rpx 10rpx;
					box-sizing: border-box;
					.dflexsb();
					.jobName {
						width: 60%;
					}
					.money {
						flex: 1;
						color: red;
						.dflex();
						justify-content: flex-end;
					}
				}
				.badge {
					.dflex();
					justify-content: flex-start;
					flex-wrap: wrap;
					margin-top: 20rpx;
					.badgeItem {
						padding: 4rpx 14rpx;
						box-sizing: border-box;
						background: #dbfcf3;
						margin-right: 14rpx;
						border-radius: 12rpx;
						.dflex();
						font-size: 22rpx;
					}
				}
				.info {
					font-size: 26rpx;
					color: #bebebe;
					margin-top: 20rpx;
					padding: 0rpx 20rpx 0rpx 0rpx;
					box-sizing: border-box;
				}
				.cInfo {
					.dflexsb();
					margin-top: 24rpx;
					.hr {
						width: 70%;
						.dflex();
						justify-content: flex-start;
						.hrHeader {
							width: 46rpx;
							height: 46rpx;
							border-radius: 50%;
							margin-right: 10rpx;
						}
						text {
							font-size: 24rpx;
						}
					}
					.address {
						flex: 1;
						font-size: 24rpx;
						color: #bebebe;
					}
				}
			}
		}
	}
</style>
